1.code

import React from "react";
import Image from "next/image";
import styles from './rotating.module.css'; 

//image-container用於定位和模式化整個圖像容器，而styles['rotate-container']是從模塊化樣式表中導入用於控制圖像容器的樣式。
function ImageHoverRotate(){
    return (
        <div>
          <h1>Continuous Rotation</h1>
          <div className={`image-container ${styles['rotate-container']}`}>。
            <Image
              src="ad_00.png" 
              alt="Image"
              width={70}
              height={75}
              className={styles.image}
            />
          </div>
        </div>
      );
}

export default ImageHoverRotate;

.rotate-container {
  width:100px;
  height:100px;
  animation: rotate 4s linear infinite;
}
@keyframes rotate {
  from {
    transform: rotate(0deg); 
  }
  to {
    transform: rotate(360deg); 
  }
}
.image{
  border-radius: 50%;
}

2.實作